<template>
  <div>
    <div class="header">
      <div class="box">
        <h3>
          <a class="iconfont icon-liebiao"></a>
          <span>
            <a class="iconfont icon-shezhi" @click="set"></a>
            <a class="iconfont icon-daipingjia" @click="tongzhi"></a>
          </span>
        </h3>
      </div>
      <div class="touxiang">
        <img src="../assets/touxiang.gif" alt="">
        <p><span class="iconfont icon-_huaban"></span>普通会员</p>
        <h1>五色糖8296</h1>
      </div>
      <ul>
        <li><span>0</span><span @click="collect">收藏</span></li>
        <li><span>0</span><span @click="attention">关注</span></li>
        <li><span>0</span><span>笔记</span></li>
      </ul>
    </div>
    <div class="chaoji">
      <img src="../assets/cjhuiyuan.gif" alt="">
    </div>
    <div class="dingdan">
      <h2><span>我的订单</span><a @click="myOrder">查看全部<span class="iconfont icon-youjiantou"></span></a></h2>
    </div>
    <div class="ding">
      <div data-v-82f66934="" class="van-grid van-hairline--top">
        <div data-v-82f66934="" class="van-grid-item" style="flex-basis: 20%;">
          <div class="van-grid-item__content van-grid-item__content--center van-hairline" @click="myOrder"><i class="van-icon van-icon-pending-payment van-grid-item__icon">
              <!----></i><span class="van-grid-item__text">待付款</span></div>
        </div>
        <div data-v-82f66934="" class="van-grid-item" style="flex-basis: 20%;">
          <div class="van-grid-item__content van-grid-item__content--center van-hairline" @click="myOrder"><i class="van-icon iconfont icon-daifahuo van-grid-item__icon">
              <!----></i><span class="van-grid-item__text">待发货</span></div>
        </div>
        <div data-v-82f66934="" class="van-grid-item" style="flex-basis: 20%;">
          <div class="van-grid-item__content van-grid-item__content--center van-hairline" @click="myOrder"><i class="van-icon iconfont icon-daifahuo van-grid-item__icon">
              <!----></i><span class="van-grid-item__text">待收货</span></div>
        </div>
        <div data-v-82f66934="" class="van-grid-item" style="flex-basis: 20%;">
          <div class="van-grid-item__content van-grid-item__content--center van-hairline" @click="myOrder"><i class="van-icon van-icon-comment-o van-grid-item__icon">
              <!----></i><span class="van-grid-item__text">待评价</span></div>
        </div>
        <div data-v-82f66934="" class="van-grid-item" style="flex-basis: 20%;">
          <div class="van-grid-item__content van-grid-item__content--center van-hairline" @click="myOrder"><i class="van-icon iconfont icon-tui van-grid-item__icon">
              <!----></i><span class="van-grid-item__text">退款退货</span></div>
        </div>
      </div>
    </div>

    <div class="caifu">
      <h2>我的财富</h2>
      <ul>
        <li @click="discountCoupon"><span>4</span><span>优惠券</span></li>
        <li><span>0.00</span><span>余额</span></li>
        <li><span>20</span><span>糖豆</span></li>
      </ul>
    </div>
    <div class="yaoqing">
      <h2>
        <p><span class="iconfont icon-tubiao-"></span>请输入邀请码</p>
        <a>领取500糖豆<span class="iconfont icon-youjiantou"></span></a>
      </h2>
    </div>
    <div class="caifu">
      <h2>更多服务</h2>
      <!-- <van-grid :column-num="4">
        <van-grid-item icon="pending-payment" text="地址管理" />
        <van-grid-item icon="pending-payment" text="我的足迹" />
        <van-grid-item icon="pending-payment" text="奢享预约" />
        <van-grid-item icon="pending-payment" text="我的团购" />
        <van-grid-item icon="pending-payment" text="帮助中心" />
      </van-grid> -->
      <div data-v-82f66934="" class="van-grid van-hairline--top">
        <div data-v-82f66934="" class="van-grid-item" style="flex-basis: 25%;">
          <div class="van-grid-item__content van-grid-item__content--center van-hairline" @click="managementAddress"><i
              class="van-icon van-icon-location-o van-grid-item__icon">
            </i><span class="van-grid-item__text">地址管理</span></div>
        </div>
        <div data-v-82f66934="" class="van-grid-item" style="flex-basis: 25%;">
          <div class="van-grid-item__content van-grid-item__content--center van-hairline" @click="history"><i class="van-icon iconfont icon-zuji van-grid-item__icon">
            </i><span class="van-grid-item__text">我的足迹</span></div>
        </div>
        <div data-v-82f66934="" class="van-grid-item" style="flex-basis: 25%;">
          <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-flower-o van-grid-item__icon">
            </i><span class="van-grid-item__text">奢享预约</span></div>
        </div>
        <div data-v-82f66934="" class="van-grid-item" style="flex-basis: 25%;">
          <div class="van-grid-item__content van-grid-item__content--center van-hairline" @click="groupBuying"><i class="van-icon iconfont icon-shu van-grid-item__icon">
            </i><span class="van-grid-item__text">我的团购</span></div>
        </div>
        <div data-v-82f66934="" class="van-grid-item" style="flex-basis: 25%;">
          <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon iconfont icon-shu van-grid-item__icon">
            </i><span class="van-grid-item__text">帮助中心</span></div>
        </div>
      </div>
    </div>
    <div class="xihuan">
      <h2>猜你喜欢</h2>
      <van-grid :border="false" :column-num="2">
        <van-grid-item :gutter="10" v-for="item in list" @click="tap(item._id)" class="sp">
          <van-image :src="item.coverImg" />
          <div class="desc">
            <!-- <p>{{item.name}}</p> -->
            <p class="name">{{item.name}}</p>
            <p class="price"> ￥ {{item.price}}</p>
            <van-icon name="shopping-cart-o" @click.stop="add(item._id)"/>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
	<p class="iconfont icon-wpicon-shangjiantou" v-if="scrollY" @click="backTop"></p>
  </div>
</template>

<script>
  import * as api from '../api/getProlist'
  export default {
    name: "My",
    data() {
      return {
        title: "我的",
        active: 0,
        value: '',
        list: [],
		scrollY:''
      }
    },
    mounted() {
      this.$emit('toparent', this.title)
	  window.addEventListener('scroll', this.scrollToTop)
      api.getProlist({
        per: 50,
        page: 1,
        name: '服饰',
        product_category: [],
      }).then((data) => {
        this.list = data.data.products
      })
    },
	destroyed () {
	  window.removeEventListener('scroll', this.scrollToTop)
	},
    methods: {
		// 点击回到顶部方法，加计时器是为了过渡顺滑
		  backTop () {
		    const that = this
		    let timer = setInterval(() => {
		      let ispeed = Math.floor(-that.scrollTop / 5)
		      document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
		      if (that.scrollTop === 0) {
		        clearInterval(timer)
		      }
		    }, 16)
		},
		// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
		  scrollToTop () {
		    const that = this
		    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
		    that.scrollTop = scrollTop
		    if (that.scrollTop > 200) {
		      that.scrollY = true
		    } else {
		      that.scrollY = false
		    }
		  },
      tap(id) {
        console.log(id)
        this.$router.push('/detail/' + id)
      },
      fenlei() {
        this.$router.push('/fenlei')
      },
      set() {
        this.$router.push('/set')
      },
      tongzhi() {
        this.$router.push('/tongzhi')
      },
      attention() {
        this.$router.push('/attention')
      },
      collect() {
        this.$router.push('/collect')
      },
      myOrder() {
        this.$router.push('/myOrder')
      },
      managementAddress() {
        this.$router.push('/addressPlace')
      },
      discountCoupon() {
        this.$router.push('/discountCoupon')
      },
      history() {
        this.$router.push('/history')
      },
      groupBuying() {
        this.$router.push('/groupBuying')
      },
      add(id){
      	console.log(id)
      	api.getAddcart({
      		product:id,
      		quantity:1,
      	}).then((data)=>{
      		console.log(data)
      		this.$toast('加入购物车成功')
      	})
      }
    }
  }
</script>

<style scoped="">
	.icon-wpicon-shangjiantou {
		font-size: 20px;
		position: fixed;
		bottom: 60px;
		right: 30px;
		color: #fff;
		text-align: center;
		line-height: 30px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #666;
		opacity: 0.7;
	}
  .ding .van-grid .van-grid-item {
    height: 70px;
    background: #fff1f1;
    color: #191413;
  }

  .ding .van-grid-item .van-grid-item__content {
    background: #fff1f1;
  }

  .ding .van-grid-item .van-grid-item__content .van-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    display: block;
    line-height: 36px;
    text-align: center;
    font-size: 20px;
  }

  .ding .van-grid-item .van-grid-item__content .iconfont {
    font-size: 20px;
  }

  .ding .van-grid-item .van-grid-item__content .van-grid-item__text {
    font-size: 10px;
  }

  .caifu .van-grid .van-grid-item {
    height: 89px;
    background: #fff;
    color: #191413;
  }

  .caifu .van-grid-item .van-grid-item__content {
    background: #fff;
  }

  .caifu .van-grid-item .van-grid-item__content .van-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fbabb4;
    display: block;
    line-height: 44px;
    text-align: center;
    color: #fff;
  }

  .caifu .van-grid-item .van-grid-item__content .iconfont {
    font-size: 20px;
  }

  .caifu .van-grid-item .van-grid-item__content .van-grid-item__text {
    font-size: 10px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: normal;
  }

  div,
  p {
    margin: 0;
  }

  .box {
    width: 100%;
    height: 32px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .box h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    padding: 0 13px 0 8px;
    margin: 0;
    color: #fff;
    background: #DA6E7B;
  }

  .box .iconfont {
    color: #fff;
    font-size: 20px;
  }

  .box span a:last-of-type {
    margin-left: 16px;
  }

  .header {
    height: 196px;
    background: #DA6E7B;
  }

  .touxiang {
    width: 63px;
    height: 90px;
    margin: 0 auto;
    position: relative;
    top: 22px;
    left: 0px;
    overflow: hidden;
    z-index: 10;
  }

  .touxiang img {
    width: 63px;
    height: 63px;
    display: block;
    border-radius: 50%;
  }

  .touxiang p {
    width: 63px;
    height: 14px;
    border-radius: 7px;
    background: #fff;
    position: absolute;
    top: 55px;
    left: 0;
    font-size: 10px;
    line-height: 14px;
    margin: 0;
  }

  .touxiang h1 {
    font-size: 10px;
    color: #f4e8e5;
    margin: 0;
    height: 38px;
    line-height: 38px;
  }

  .touxiang .iconfont {
    font-size: 10px;
    margin: 0 2px 0 4px;
  }

  .header ul {
    margin-top: 31px;
    display: flex;
    justify-content: center;
  }

  .header ul li {
    width: 84px;
    height: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-right: 2px solid #dbbbbf;
    color: #f1faf3;
    font-size: 10px;
  }

  .header ul li:last-of-type {
    border: 0;
  }

  .chaoji {
    height: 40px;
    border-bottom: 1px solid #f4f4f4;
  }

  .chaoji img {
    width: 305px;
    height: 33px;
    display: block;
    margin: 0 auto;
  }

  .dingdan {
    height: 34px;
  }

  .dingdan h2 {
    display: flex;
    padding: 0 10px;
    height: 34px;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
  }

  .dingdan a {
    color: #9a9fa1;
  }

  .dingdan .iconfont {
    color: #999;
    font-size: 10px;
    padding-left: 5px;
  }


  .caifu h2 {
    padding: 0 10px;
    height: 33px;
    line-height: 33px;
    font-size: 10px;
    border-top: 10px solid #eff3f6;
    border-bottom: 1px solid #EFF3F4;
  }

  .caifu ul {
    height: 67px;
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
  }

  .caifu ul li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #9c9fa1;
    font-size: 10px;
    padding: 20px 0 15px 0;
  }

  .caifu ul li span:first-of-type {
    color: #c27e8c;
  }

  .yaoqing {
    height: 34px;
  }

  .yaoqing h2 {
    display: flex;
    padding: 0 10px;
    height: 34px;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    border-top: 10px solid #eff3f6;
  }

  .yaoqing a {
    color: #9a9fa1;
  }

  .yaoqing .iconfont {
    color: #999;
    font-size: 10px;
    padding-left: 5px;
  }

  .yaoqing p .iconfont {
    color: #fdabb2;
    font-size: 16px;
    padding-right: 5px;
  }

  [class*=van-hairline]::after {
    border: 0;
  }

  .xihuan h2 {
    padding: 0 10px;
    height: 33px;
    line-height: 33px;
    font-size: 10px;
    border-top: 10px solid #eff3f6;
    border-bottom: 1px solid #EFF3F4;
    margin: 0;
  }

  .van-swipe-item img {
    width: 304px;
    height: 146px;
    margin: 40px auto 0;
    display: block;
  }

  .icon-shezhi:before {
    font-size: 16px;
  }

  .icon-daipingjia:before {
    font-size: 20px
  }

  .xihuan .van-icon {
    font-size: 16px;
    width: 24px;
    height: 24px;
    border: 1px solid #d5616e;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    background: #d5616e;
    color: #efd1d1;
    position: absolute;
    right: 13px;
    bottom: 20px;
  }

  .xihuan .price {
    color: #d88694;
    font-size: 12px;
  }

  .xihuan .name {
    width: 130px;
    font-size: 10px;
    height: 38px;
    line-height: 38px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .xihuan .sp {
    border-right: 2px solid #f9f9f9;
    border-bottom: 2px solid #f9f9f9;
  }
  .xihuan .sp:nth-of-type(even){
    border-right: 0;
  }
  .xihuan .van-image {
    width: 135px;
    height: 150px;
  }
</style>
